<template>
   <div>
      <Header />
      <div class="box">
         <img src="../Images/大众点评.png" alt="" width="100%" height="100%">
      </div>
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" indicator-color="#F5734B">
         <van-swipe-item>
            <!-- grid表格 -->
            <van-grid :column-num="5" :border="false">
               <van-grid-item v-for="icon1 in iconList[0]" :key="icon1.id" :icon="icon1.url" :text="icon1.text"
                  @click="goCat(icon1.id,icon1.text)" />
            </van-grid>
         </van-swipe-item>
         <van-swipe-item>
            <van-grid :column-num="5" :border="false">
               <van-grid-item v-for="icon2 in iconList[1]" :key="icon2.id" :icon="icon2.url" :text="icon2.text" />
            </van-grid>
         </van-swipe-item>
         <van-swipe-item>
            <van-grid :column-num="5" :border="false">
               <van-grid-item v-for="icon3 in iconList[2]" :key="icon3.id" :icon="icon3.url" :text="icon3.text" />
            </van-grid>
         </van-swipe-item>
      </van-swipe>
      <div class="bord"></div>
      <!-- 猜你喜欢 -->
      <div class="like">
         <span>猜你喜欢</span>
      </div>
      <!-- 商品列表 -->
      <div class="shopList">
         <!-- 每一项 -->
         <div class="shopItem" v-for="(shop, index) in shopList" :key="index"
            @click="goShopInfo(shop.id,shop.dealgroupPrice,shop.marketPrice)">
            <!-- 图片 -->
            <div class="pic">
               <img :src="shop.defaultPic" />
            </div>
            <!-- 右侧区域 -->
            <div class="shopInfo">
               <div class="shop_Name">{{shop.shopName}}</div>
               <div class="shop_introduce">{{shop.dealGroupTitle}}</div>
               <div class="shop_price">
                  <div>
                     <!-- 现价 -->
                     <ins class="price1">￥ {{shop.dealgroupPrice}}</ins>&nbsp;
                     <!-- 原价 -->
                     <ins class="price2">￥ {{shop.marketPrice}}</ins>
                  </div>
                  <!-- 销售量 -->
                  <div class="soldOut">
                     {{shop.salesdesc}}
                  </div>
               </div>
            </div>
            <hr />
         </div>
      </div>
      <!-- 查看更多 -->
      <a @click="toMore" class="findMore">
         查看更多
      </a>
      <!-- 底部 -->
      <div class="footer">
         <a href="javascript:;">我的</a>
         <em class="wide_sep">|</em>
         <a href="javascript:;">添加商户</a>
         <em class="wide_sep">|</em>
         <a href="javascript:;">意见反馈</a>
         <br><br>
         <a href="javascript:;">美团网</a>
         <em class="wide_sep">|</em>
         <a href="javascript:;">美团下载</a>
         <em class="wide_sep">|</em>
         <a href="javascript:;">结婚</a>
         <em class="wide_sep">|</em>
         <a href="javascript:;">亲子</a>
         <em class="wide_sep">|</em>
         <a href="javascript:;">家装</a>
         <em class="wide_sep">|</em>
         <a href="javascript:;">宴会</a>
         <em class="wide_sep">|</em>
         <a href="javascript:;">教育</a>
         <br><br>
         <a href="javascript:;">电脑版</a>
         <em class="wide_sep">|</em>
         <a href="javascript:;">客户端</a>
         <br><br>
         <p class="copyright">copyright ©2020 dianping.com</p>
      </div>
   </div>
</template>

<script>
   // 引入vuex
   import {
      mapState
   } from 'vuex'
   import Header from "@/components/Header";

   export default {
      name: 'home',
      components: {
         Header
      },
      data() {
         return {
            shopList: []
         }
      },
      mounted() {
         // 向仓库派发请求，获取商品列表数据
         // this.$store.dispatch('getShopList')
         // 向仓库派发请求，获取icon图标列表数据
         this.$store.dispatch('getIconList');
         this.getLike();
      },
      computed: {
         ...mapState({
            // 获取商品列表数据
            // shopList: state => state.home.shopList,
            // 获取icon图标列表数据
            iconList: state => state.home.iconList
         })
      },
      methods: {
         // 跳转商品详情       现价         原价
         goShopInfo(id, dealgroupPrice, marketPrice) {
            // 配置跳转参数
            const location = {
               name: 'likedetail',
               params: {
                  id
               },
               query: {
                  // 现价
                  dealgroupPrice,
                  // 原价
                  marketPrice
               }
            }
            // 路由跳转
            this.$router.push(location)
         },
         //跳转猫眼电影
         goCat(id, name) {
            // 配置路由跳转参数
            const location = {
               name: 'movie',
               params: {
                  id
               },
               query: {
                  name
               }
            }
            this.$router.push(location)
         },
         async getLike() {
            const result = await this.$API.like()
            if (result.code == 200) {
               this.shopList = result.like
            }
         },
         toMore(){
            this.shopList = [...this.shopList,...this.shopList]
            console.log(this.shopList)
         }
      },
   }
</script>

<style lang="less" scoped>
   * {
      margin: 0;
      padding: 0;
      font-size: 14px;
   }

   .box {
      border-bottom: 1px solid #F6F6F6;
      height: 120px;
   }

   .my-swipe .van-swipe-item {
      color: black;
      font-size: 20px;
      text-align: center;
   }

   .van-grid-item /deep/.van-icon__image {
      width: 2.5em;
      height: 2.5em;
      object-fit: contain;
   }

   .van-swipe__indicators /deep/ .van-swipe__indicator {
      width: 0.16rem;
      height: 0.16rem;
      background-color: blcak !important;
      border-radius: 100%;
      opacity: .3;
      -webkit-transition: opacity .2s, background-color .2s;
      transition: opacity .2s, background-color .2s;
   }


   .like {
      margin-top: 5px;
      line-height: 10px;
      padding-top: 10px;
      padding-left: 15px;
      font-size: 14px;
      color: #777;
   }

   .shopList {

      .shopItem {
         padding: 10px;
         height: 88px;
         position: relative;

         .pic {
            padding-right: 10px;
            float: left;

            img {
               width: 90px;
               height: 90px;
            }
         }

         .shopInfo {
            float: left;
            width: 242px;
            height: 90px;

            .shop_Name {
               font-size: 17px;
               font-weight: 550;
               color: #111;
            }

            .shop_introduce {
               overflow: hidden;
               font-size: 13px;
               color: #777;
               padding-top: 9px;
               padding-bottom: 13px;
            }

            .shop_price {
               display: flex;
               justify-content: space-between;
               height: 22px;
               line-height: 22px;
               padding-right: 4px;

               .price1 {
                  color: #f63;
                  font-size: 21px;
                  text-decoration: none;
                  font-weight: 700;
               }

               .price2 {
                  font-size: 13px;
                  color: #777;
                  text-decoration: line-through;
                  vertical-align: 1px;
               }
            }

            .soldOut {
               overflow: hidden;
               text-overflow: ellipsis;
               white-space: nowrap;
               text-align: right;
               font-size: 13px;
               color: #777;
               line-height: 24px;
            }
         }

         hr {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 358.2px;
            background-color: #E6E6E6;
         }
      }
   }

   // 查看更多
   .findMore {
      display: inline-block;
      width: 375.2px;
      height: 45px;
      line-height: 45px;
      text-align: center;
      background-color: #fff;
      color: #333;
      font-size: 15px;
   }

   // 底部样式
   .footer {
      width: 375.2px;
      height: 137.6px;
      background-color: #F0F0F0;
      text-align: center;
      padding: 15px 5px 10px;
      font-weight: 400;
      font-size: 12px;

      .wide_sep {
         padding: 0 6px;
      }

      a {
         color: #8c8c8c;
      }

      em {
         color: #8c8c8c;
      }

      .copyright {
         color: #d1d1d1;
         margin-top: 20px;
         text-shadow: 0 1px 1px #fff;
      }
   }
</style>